﻿<h4 class="page-header">
    Home page with boxes
    <small>We use the base class <code>.box</code> to create widgets simply.</small>
</h4>
<div class="row">
    <div class="col-md-4">
        <!-- Default box -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Default Box (button tooltip)</h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-default btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="box-body">
                Box class: <code>.box</code>
                <p>
                    amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                    berliner weisse wort chiller adjunct hydrometer alcohol aau!
                    sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                </p>
            </div><!-- /.box-body -->
            <div class="box-footer">
                <code>.box-footer</code>
            </div><!-- /.box-footer-->
        </div><!-- /.box -->
    </div><!-- /.col -->
    <div class="col-md-4">
        <!-- Primary box -->
        <div class="box box-primary">
            <div class="box-header" data-toggle="tooltip" title="Header tooltip">
                <h3 class="box-title">Primary Box (header tooltip)</h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-primary btn-xs" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-primary btn-xs" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="box-body">
                Box class: <code>.box.box-primary</code>
                <p>
                    amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                    berliner weisse wort chiller adjunct hydrometer alcohol aau!
                    sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                </p>
            </div><!-- /.box-body -->
            <div class="box-footer">
                <code>.box-footer</code>
            </div><!-- /.box-footer-->
        </div><!-- /.box -->
    </div><!-- /.col -->
    <div class="col-md-4">
        <!-- Info box -->
        <div class="box box-info">
            <div class="box-header">
                <h3 class="box-title">Info Box</h3>
                <div class="box-tools pull-right">
                    <div class="label bg-aqua">Label</div>
                </div>
            </div>
            <div class="box-body">
                Box class: <code>.box.box-info</code>
                <p>
                    amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                    berliner weisse wort chiller adjunct hydrometer alcohol aau!
                    sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                </p>
            </div><!-- /.box-body -->
            <div class="box-footer">
                <code>.box-footer</code>
            </div><!-- /.box-footer-->
        </div><!-- /.box -->
    </div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
    <div class="col-md-4">
        <!-- Danger box -->
        <div class="box box-danger">
            <div class="box-header">
                <h3 class="box-title">Danger Box (Loading state)</h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-danger btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-danger btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="box-body">
                Box class: <code>.box.box-danger</code>
                <p>
                    amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                    berliner weisse wort chiller adjunct hydrometer alcohol aau!
                    sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                </p>
            </div><!-- /.box-body -->
            <!-- Loading (remove the following to stop the loading)-->
            <div class="overlay"></div>
            <div class="loading-img"></div>
            <!-- end loading -->
        </div><!-- /.box -->
    </div><!-- /.col -->
    <div class="col-md-4">
        <!-- Success box -->
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Success Box (toggle buttons)</h3>
                <div class="box-tools pull-right">
                    <div class="btn-group" data-toggle="btn-toggle">
                        <button type="button" class="btn btn-success btn-xs active" data-toggle="on">Left</button>
                        <button type="button" class="btn btn-success btn-xs" data-toggle="off">Right</button>
                    </div>
                </div>
            </div>
            <div class="box-body">
                Box class: <code>.box.box-success</code>
                <p>
                    amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                    berliner weisse wort chiller adjunct hydrometer alcohol aau!
                    sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                </p>
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div><!-- /.col -->
    <div class="col-md-4">
        <!-- Warning box -->
        <div class="box box-warning">
            <div class="box-header">
                <h3 class="box-title">Warning Box</h3>
                <div class="box-tools pull-right">
                    <ul class="pagination pagination-sm inline">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-body">
                Box class: <code>.box.box-warning</code>
                <p>
                    amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
                    berliner weisse wort chiller adjunct hydrometer alcohol aau!
                    sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
                </p>
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div><!-- /.col -->
</div><!-- /.row -->
